<template>
  <div id="search">
    <!-- 搜索区域 -->
    <div class="search">
      <search-input @search="search" ref="search"></search-input>
    </div>
    <!-- 热搜列表 -->
    <div class="hotSearch">
      <hot-search @hotListClick="hotListClick"></hot-search>
    </div>
    <!-- 匹配到的值 -->
    <div class="result" v-show="isResult">
      <music-bar
        v-for="(item,index) in showResult"
        :key="index"
        :show-left-top="false"
        :music-info="item"
      ></music-bar>
    </div>
  </div>
</template>

<script>
import { searchResult } from "@/network/search";
import { MusicInfo } from "@/assets/js/MusicInfo";

import SearchInput from "./childCom/SearchInput";
import HotSearch from "./childCom/HotSearch";
import MusicBar from "@/components/musicbar/MusicBar";
export default {
  data() {
    return {
      isResult: false,
      result: null,
    };
  },
  components: {
    SearchInput,
    HotSearch,
    MusicBar,
  },
  methods: {
    search(value) {
      searchResult(value).then(
        (res) => {
          this.result = res.result.songs;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    hotListClick(value) {
      this.$refs.search.searchValue = value;
      this.search(value);
    },
  },
  computed: {
    showResult() {
      const myresult = [];
      if (this.result) {
        const list = this.result.filter((val, index, arr) => index < 20);
        for (let item of list) {
          const obj = {};
          obj.musicName = item.name;
          obj.author = item.artists[0].name;
          obj.songs = item.album.name;
          obj.iid = item.id;
          myresult.push(new MusicInfo(obj));
        }
        this.isResult = true;
      }
      return myresult;
    },
  },
  deactivated() {
    // 离开界面，搜索结果不再显示
    this.isResult = false;
  },
};
</script>

<style scoped>
#search {
  padding-top: 40px;
}
.search {
  padding: 15px 10px;
  border-color: rgba(0, 0, 0, 0.1);
  border: 0 solid rgba(0, 0, 0, 0.1);
  border-bottom-width: 1px;
}
.hotSearch {
  padding: 15px 10px 0;
}
.result {
  padding-left: 10px;
}
</style>